<!-- 这是父组件 -->
<template>
    <div class="selectedHome">
        <div class="header">
            <van-nav-bar title="已选品" />
        </div>
        <SimplicityTitle :title="userInfo.dept?.deptName" :imgUrl="icon_dianshang" />
        <div class="selectedProducts">
            <SelectionSurvey title="周选品概况" />
            <SelectionCardShell title="招商选品" :imgUrl="icon_zhaoshangxuanpin1">
                <DivThree type="招商" v-for="item in selectAttractData" :key="item.deptId" :item="item"
                    @click="routerTo('/zsList', item)">
                    <DivOne :floor="item.floor" :title="item.deptName" />
                </DivThree>
            </SelectionCardShell>
            <SelectionCardShell title="研发选品" :imgUrl="icon_zhaoshangxuanpin1">
                <DivThree type="研发" v-for="item in selectInventData" :key="item.deptId" :item="item"
                    @click="routerTo('/zsList', item)">
                    <DivOne :floor="item.floor" :title="item.deptName" />
                </DivThree>
            </SelectionCardShell>
            <SelectionCardShell title="产品出库" :imgUrl="icon_chanpinxuanpin1" :titleRight="true"
                @onRight="routerTo('/cpAllList')">
                <DivThree type="产品" v-for="(item, index) in selectOutStatisticsData" :key="item.deptId" :item="item"
                    @click="routerTo('/cpList', item)">
                    <DivTwo :index="index" :title="item.deptName" />
                </DivThree>
            </SelectionCardShell>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// 组件
import SimplicityTitle from './components/simplicityTitle/index.vue'
import SelectionSurvey from './components/selectionSurvey/index.vue'
import SelectionCardShell from './components/selectionCardShell/index.vue'
import DivOne from './components/stylePiece/divOne.vue'
import DivTwo from './components/stylePiece/divTwo.vue'
import DivThree from './components/stylePiece/divThree.vue'
// api
import { getInfo } from "@/api/supplierList/index";
import { selectAttract, selectOutStatistics, selectInventSelection } from '@/api/operation/index'
// 图片
import icon_dianshang from '@/assets/operation/icon_dianshang.png'
import icon_zhaoshangxuanpin1 from '@/assets/operation/icon_zhaoshangxuanpin1.png'
import icon_chanpinxuanpin1 from '@/assets/operation/icon_chanpinxuanpin1.png'
import { onMounted } from 'vue'


const router = useRouter()
// 招商选品列表
const selectAttractData = ref<Array<any>>([])
// 研发选品列表
const selectInventData = ref<Array<any>>([])
// 产品出库列表
const selectOutStatisticsData = ref<Array<any>>([])
// 用户信息
const userInfo = ref<any>({});

const routerTo = (url: string, item?: any) => {
    if (url === '/cpList') {
        router.push({
            path: url,
            query: {
                title: item.deptName,
                stockDeptId: item.deptId
            }
        })
    } else if (url === '/zsList') {
        router.push({
            path: url,
            query: {
                title: item.deptName,
                recruiterDeptId: item.deptId
            }
        })
    } else {
        router.push({
            path: url,
        })
    }
}
// 获取招商选品列表
const SelectAttract = async () => {
    const { data = [] } = await selectAttract({})
    selectAttractData.value = data
}
// 获取研发选品列表
const SelectInventSelection = async () => {
    const { data = [] } = await selectInventSelection({})
    selectInventData.value = data
}
// 获取产品出库列表
const SelectOutStatistics = async () => {
    const { data = [] } = await selectOutStatistics({})
    selectOutStatisticsData.value = data
}
// 获取用户信息
const GetInfo = async () => {
    const res = await getInfo();
    userInfo.value = res.data.user;
};
onMounted(() => {
    GetInfo()
    SelectAttract()
    SelectOutStatistics()
    SelectInventSelection()
})
</script>
<style lang="less" scoped>
.selectedHome {
    width: 100%;
    height: calc(100vh - 50px);
    overflow: hidden;
    display: flex;
    flex-flow: column;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .selectedProducts {
        flex: 1;
        overflow-y: auto;
        width: 100%;
        box-sizing: border-box;
        background: #F6FAFF;
        padding: 0 10px 1px;
    }
}
</style>
